
fetch('https://app2.motie.com/pc/home?type=2').then(res => res.json()).then(res1 => {
    // console.log(res1.data.newBook.templateList
    // )  //res1就是后台返回的数据
    const lists = res1.data.copyright.templateList
    const leftText = document.querySelector('.lefttext')
    const aaa = document.querySelector('.swiper-wrapper')
    console.log(lists)
    lists.forEach(item => {
        console.log(item.id)

        aaa.innerHTML += `
            <div class="swiper-slide"
                style="background-image:url(${item.imgUrl})"  onclick="jumps(${item.id}); return false;">
            </div>
                
            `
        leftText.innerHTML = `
            <p class="p1">${lists[0].name}</p>
            <p class="p2">${lists[0].content}</p>
            <div class="view" style="cursor: pointer;">书籍详情</div>
        `
    });
    new Swiper('.swiper-container2', {
        effect: 'coverflow',
        centeredSlides: true,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        loop: true,
        autoplay: 2000,
        onlyExternal: true,
        coverflow: {
            rotate: 0,
            stretch: 0,
            depth: 100,
            modifier: 1,

            slidesShadows: true
        },
        onSlideChangeStart: function (swiper) {
            const currentIndex = swiper.activeIndex;
            // 从数据源取对应项（注意 loop 为 true 时，索引可能超过原数组长度，需处理）
            const realIndex = swiper.slides[currentIndex].getAttribute('data-swiper-slide-index');
            const currentItem = lists[realIndex];

            // 更新左侧文字
            leftText.innerHTML = `
                <p class="p1">${currentItem.name}</p>
                <p class="p2">${currentItem.content}</p>
                <div class="view">书籍详情</div>
                `;
        }
    })

    const secLeftUl = document.querySelector('.secleftul')
    const listss = res1.data.editorRecommend.templateList
    listss.forEach(items => {
        secLeftUl.innerHTML += `
            <li>
                <img src=${items.imgUrl}
                    alt="" onclick="jumps(${items.id}); return false;">
                <p class="p1">${items.name}</p>
                <p class="p2">${items.authorName}</p>
            </li>
            
        `
    })

    const newBook = res1.data.newBook.templateList
    const newBookUl = document.querySelector('.newbookul')
    newBook.forEach(itemss => {
        newBookUl.innerHTML += `
         <li>
            <img onclick="jumps(${itemss.id}); return false;" src=${itemss.imgUrl}
                alt="">
            <p class="p1">${itemss.name}</p>
            <p class="p2">${itemss.authorName}</p>
        </li>
                       
        `
    })


    // console.log(res1.data.wirelessZone.templateList)
    const temLi = res1.data.wirelessZone.templateList
    const btnCon = document.querySelector('.botcon')
    temLi.forEach(itemsss => {
        btnCon.innerHTML += `
         <div class="listbook">
            <img onclick="jumps(${itemsss.id}); return false;" src=${itemsss.imgUrl}
                alt="">
            <div class="booktext">
                <p class="p11">${itemsss.name}</p>
                <p class="p22">${itemsss.content}</p>
                <p class="p33">作者：${itemsss.authorName}</p>
            </div>
        </div>
                       
        `
    })

    // console.log(res1.data.wonderful.templateList)
    const temLii = res1.data.wonderful.templateList
    const newBookuLl = document.querySelector('.newbookull')
    temLii.forEach(itemssss => {
        newBookuLl.innerHTML += `
        <li>
            <img onclick="jumps(${itemssss.id}); return false;" src=${itemssss.imgUrl}
                alt="">
            <p class="p1">${itemssss.name}</p>
            <p class="p2">${itemssss.content}</p>
        </li>
                       
        `
    })

    // console.log(res1.data.finishRecommend.templateList)
    const lasLi = res1.data.finishRecommend.templateList
    const lll = document.querySelector('.lasulll')
    lasLi.forEach(itemsssss => {
        lll.innerHTML += `
        <li class="lll">
            <img  onclick="jumps(${itemsssss.id}); return false;" src=${itemsssss.imgUrl}
                alt="">
            <p class="p1">${itemsssss.name}</p>
            <p class="p2">${itemsssss.content}</p>
        </li>
        `
    })

    // console.log(res1.data)





}).catch(err => {
    console.log(err)  //错误信息捕获
})



var t = null
function searchBook() {

    const searchInput = document.querySelector('.searchinput')
    const searchUl = document.querySelector('.searchul')
    const aoa = document.querySelector('.aoa')
    const loading = document.querySelector('.loading');

    aoa.innerHTML = `
        <div class="seatop">
            <div class="searchtitle">
            </div>
            <p>搜“${searchInput.value}”相关作品>></p>
        </div>
    `
    if (!searchInput.value.trim()) {
        searchUl.innerHTML = ''
        aoa.innerHTML = ''
        loading.style.display = 'none';


    }
    if (t) {
        clearTimeout(t)
    }
    t = setTimeout(function () {
        if (!searchInput.value) {
            loading.style.display = 'none';
            return;
        } else {
            loading.style.display = 'block';
        }

        fetch('https://app2.motie.com/search?objectType=2&word=' + searchInput.value + '&pageSize=2').then(res => res.json()).then(res1 => {
            // console.log(res1.data.bookList)

            searchUl.innerHTML = ''
            loading.style.display = 'none';
            res1.data.bookList.forEach(item => {
                searchUl.innerHTML += `
                    <li onclick="jumps(${item.id}); return false;" class="searchli">
                        <img src=${item.authorIcon} alt="">
                        <div class="seatex">
                            <p class="p1">${item.name}</p>
                            <p>${item.authorName}</p>
                        </div>
                    </li>

                `

            })

        }).catch(err => {
            console.log(err)  //错误信息捕获
        })
    }, 500)


}


function listSwitch(type) {

    fetch(`https://app2.motie.com/pc/recentUpdates?siteType=2&type=${type}`).then(res => res.json()).then(res1 => {
        console.log(res1)  //res1就是后台返回的数据
        const itemConn = document.querySelector('.itemconn')
        itemConn.innerHTML = ''; // 清空现有内容
        res1.data.forEach(item => {

            // 定义时间戳（毫秒）
            const timestamp = item.lastUpdateTime;

            // 创建Date对象（直接传入毫秒级时间戳）
            const date = new Date(timestamp);

            // 提取年、月、日、时、分、秒（注意月份从0开始，需要+1）
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0'); // 补零处理
            const day = String(date.getDate()).padStart(2, '0');
            const hours = String(date.getHours()).padStart(2, '0');
            const minutes = String(date.getMinutes()).padStart(2, '0');
            const seconds = String(date.getSeconds()).padStart(2, '0');

            // 拼接成指定格式（修正了重复的hours）
            const formattedTime = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;

            // console.log(formattedTime); // 正确输出：2025-08-31 09:00:08

            itemConn.innerHTML += `
        <div class="itemcon" onclick="jumps(${item.bookId}); return false;" >
            <div class="classis">${item.sort}</div>
            <div class="name">${item.bookName}</div>
            <div class="newest">
                ${item.chapterName}
            </div>
            <div class="author">${item.authorName}</div>
            <div class="time">${formattedTime}</div>
        </div>
        
        `
        })
    }).catch(err => {
        console.log(err)  //错误信息捕获
    })

}

listSwitch(0)


const tabs = document.querySelectorAll('.threeaa .p1')

tabs.forEach(tab => {
    tab.addEventListener('mouseenter', function () {
        // 2.1 移除所有选项的 p0 类
        tabs.forEach(t => t.classList.remove('p0'));
        // 2.2 给当前经过的选项添加 p0 类
        this.classList.add('p0');
    });
});

function hover(type) {
    // 调用 listSwitch 函数，传递对应的 type 值
    listSwitch(type);
}

// 获取“返回顶部”按钮
const backToTopBtn = document.getElementById('backToTop');

// 监听页面滚动事件：滚动一定距离后，显示“返回顶部”按钮
window.addEventListener('scroll', () => {
    // 当滚动距离大于 300px 时，显示按钮；否则隐藏
    if (window.scrollY > 300) {
        backToTopBtn.style.display = 'block';
    } else {
        backToTopBtn.style.display = 'none';
    }
});

// 监听按钮点击事件：点击后，页面平滑滚动到顶部
backToTopBtn.addEventListener('click', () => {
    // 使用 window.scrollTo 实现平滑滚动
    window.scrollTo({
        top: 0,             // 滚动到顶部（top: 0）
        behavior: 'smooth'  // 平滑滚动效果
    });
});

function jumps(id) {
    window.location.href = `./momo-bookDetail.html?id=${id}`

}



const codeImg = document.querySelector('.verify')
const codeImgs = [
    './img/login-code1.jpg',
    './img/login-code2.jpg',
    './img/login-code3.jpg',
    './img/login-code4.jpg',
    './img/login-code5.jpg'
]
const codeNum = [
    'gc6p',
    'XaOP',
    'VXXE',
    'XnCR',
    'aZrD'
]
const account = document.querySelector('.account')
const psw = document.querySelector('.psw')
const inner = document.querySelector('.inner')
const inner1 = document.querySelector('.inner1')
const reginner = document.querySelector('.reginner')
const reginner1 = document.querySelector('.reginner1')
const err = document.querySelector('.err')
let innerBol = false
let innerBol1 = false
let reginnerBol = false
let reginnerBol1 = false
let codeIpt
let num
let regNum
const line = document.querySelector('.line')
inner.onclick = () => {
    if (!innerBol) {
        inner.style.backgroundColor = '#ff4c2f'
        innerBol = true
    } else {
        inner.style.backgroundColor = '#fff'
        innerBol = false
    }
}
inner1.onclick = () => {
    if (!innerBol1) {
        inner1.style.backgroundColor = '#ff4c2f'
        innerBol1 = true
    } else {
        inner1.style.backgroundColor = '#fff'
        innerBol1 = false
    }
}
reginner.onclick = () => {
    if (!reginnerBol) {
        reginner.style.backgroundColor = '#ff4c2f'
        reginnerBol = true
    } else {
        reginner.style.backgroundColor = '#fff'
        reginnerBol = false
    }
}
reginner1.onclick = () => {
    if (!reginnerBol1) {
        reginner1.style.backgroundColor = '#ff4c2f'
        reginnerBol1 = true
    } else {
        reginner1.style.backgroundColor = '#fff'
        reginnerBol1 = false
    }
}
const codeChange = () => {
    num = Math.floor(Math.random() * 5)
    codeImg.innerHTML = `
        <input type="text" placeholder="验证码" class="code">
        <img onclick="codeChange()" src="${codeImgs[num]}" alt="">
    `
    codeIpt = document.querySelector('.verify input')
}
codeChange()
const test = () => {
    const loginBox = document.querySelector('.login-box')
    loginBox.style.display = 'none'

    let reg = new RegExp(`^${codeNum[num]}$`, 'i')
    let ipt1
    let ipt2
    if (innerBol1) {
        ipt1 = localStorage.getItem('account')
        ipt2 = localStorage.getItem('psw')
    } else {
        ipt1 = sessionStorage.getItem('account')
        ipt2 = sessionStorage.getItem('psw')
    }
    console.log(ipt1)
    if (account.value == ipt1) {
        if (psw.value == ipt2) {
            if (reg.test(`${codeIpt.value}`)) {
                if (innerBol = true) {
                    err.innerHTML = ''
                    alert('登陆成功')
                    window.history.back()
                } else {
                    err.innerHTML = `
                            请勾选用户协议
                        `
                }
            } else {
                err.innerHTML = `
                    请输入正确的验证码
                `
            }
        } else {
            err.innerHTML = `
                请输入正确的密码
            `
        }
    } else {
        err.innerHTML = `
            请输入正确的账号
        `
    }
}
const register = () => {
    let phoneReg = /^1[3-9]\d{9}$/
    let passwordReg = /^(?=.*[A-Za-z])(?=.*\d).{6,12}$/
    let regnumReg = new RegExp(`^${regNum}$`)
    const phone = document.querySelector('.regaccount')
    const regpsw = document.querySelector('.regpsw')
    console.log(regNum);
    const loginBox = document.querySelector('.login-box')
    loginBox.style.display = 'none'


    if (phoneReg.test(`${phone.value}`)) {
        if (passwordReg.test(`${regpsw.value}`)) {
            if (regnumReg.test(`${regNum}`) && regNum != undefined) {
                if (reginnerBol = true) {
                    err.innerHTML = ''
                    if (reginnerBol1) {
                        localStorage.setItem('account', phone.value)
                        localStorage.setItem('psw', regpsw.value)
                    } else {
                        sessionStorage.setItem('account', phone.value)
                        sessionStorage.setItem('psw', regpsw.value)
                    }
                } else {
                    err.innerHTML = `
                        请勾选用户协议
                    `
                }
            } else {
                err.innerHTML = `
                    请输入正确的动态验证码
                `
            }
        } else {
            err.innerHTML = `
                请输入6-12位同时包含数字和字母的密码
            `
        }
    } else {
        err.innerHTML = `
            请输入正确的手机号
        `
    }
}
const changeTab = (t) => {
    const tab1 = document.querySelector('.tab1')
    const tab2 = document.querySelector('.tab2')
    const form = document.querySelector('.form')
    const register = document.querySelector('.register')
    tab1.classList.remove('active')
    tab2.classList.remove('active')
    t.classList.add('active')
    if (t.classList.contains('tab1')) {
        line.style.left = '45px'
        form.style.display = 'block'
        register.style.display = 'none'
    } else {
        line.style.left = '220px'
        form.style.display = 'none'
        register.style.display = 'block'
    }
}
const sendPsw = () => {
    regNum = String(Math.floor(Math.random() * 10)) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10) + Math.floor(Math.random() * 10)
    alert(regNum)
}

function loading() {
    const loginBox = document.querySelector('.login-box')
    loginBox.style.display = 'block'


}












